<@override name="content">
<div id="app"> <el-container v-loading="loading">
    <el-main>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="订单ID：">
                <el-input v-model.trim="queryData.orderId" size="mini" placeholder="请输入订单ID" clearable></el-input>
            </el-form-item>


            <el-form-item label="" class="itemTime">
                <el-button type="primary" class="lastItem" size="mini" @click="getList">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="orderId"
                    label="订单ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="productId"
                    label="商品ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="productName"
                    label="商品名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="金额"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="productCount"
                    label="数量"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="statusName"
                    label="订单状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="productRebate"
                    label="返佣%"
                    width="120">
            </el-table-column>

            <el-table-column
                    label="创建时间"
                    width="180">
                <template slot-scope="scope">{{ moment(scope.row.createAt).format('YYYY-MM-DD HH:mm:ss') }}</template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-link @click="onDetail(scope.row)" type="primary">查看</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pageBox">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="queryData.pageNum" :page-sizes="[10, 20, 50, 100]"
                           :page-size="queryData.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="count" background>
            </el-pagination>
        </div>

    </el-main>

</el-container>

    <el-dialog  :visible.sync="dialogVisible" width="80%">
        <el-descriptions title="订单详情" :column="3"  border v-if="detailInfo">
            <el-descriptions-item label="订单ID">{{detailInfo.orderId}}</el-descriptions-item>
            <el-descriptions-item label="客户ID">{{detailInfo.customerId}}</el-descriptions-item>
            <el-descriptions-item label="支付时间">{{moment(detailInfo.payTime).format('YYYY-MM-DD HH:mm:ss')}}</el-descriptions-item>
            <el-descriptions-item label="商品名称">{{detailInfo.productName}}</el-descriptions-item>
            <el-descriptions-item label="商品数量">{{detailInfo.productCount}}</el-descriptions-item>
            <el-descriptions-item label="商品单价">{{detailInfo.productPrice}}</el-descriptions-item>
            <el-descriptions-item label="返佣比例">{{detailInfo.productRebate}}</el-descriptions-item>
            <el-descriptions-item label="支付金额">{{detailInfo.money}}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{detailInfo.payMethodName}}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{detailInfo.statusName}}</el-descriptions-item>
            <el-descriptions-item label="使用积分">{{detailInfo.point}}</el-descriptions-item>
            <el-descriptions-item label="快递单号">{{detailInfo.shippingSn}}</el-descriptions-item>
            <el-descriptions-item label="发货时间">{{moment(detailInfo.shippingTime).format('YYYY-MM-DD HH:mm:ss')}}</el-descriptions-item>
            <el-descriptions-item label="收货时间">{{moment(detailInfo.receiveTime).format('YYYY-MM-DD HH:mm:ss')}}</el-descriptions-item>
            <el-descriptions-item label="发货地址">{{detailInfo.address}}</el-descriptions-item>
            <el-descriptions-item label="发票信息">{{detailInfo.invoice}}</el-descriptions-item>
            <el-descriptions-item label="收货时间">{{moment(detailInfo.createAt).format('YYYY-MM-DD HH:mm:ss')}}</el-descriptions-item>
            <el-descriptions-item label="备注">{{detailInfo.remark}}</el-descriptions-item>

        </el-descriptions>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/res/js/page/ordersPage.js"></script>
<style scoped>
    .item-w{
        width: 500px;
    }
    .pageBox {
        margin-top: 20px;
        text-align: right;
    }
</style>
</@override>
<!-- extends 一定要写在页面最下方 -->
<@extends name="_base.html"/>